<template>
	<div id="Zone">
		<x-header :left-options="{showBack: false}" title="秒杀专区" class="header vux-1px-b">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			<!--<a slot="right"><i class="tp-icon icon-share2"></i></a>-->
		</x-header>
		<div class="main" v-if="killInfo == ''">
			<div class="no-data">
				<img src="../assets/images/home/nodata.png" />
			</div>
		</div>
		<div class="main" v-else>
			<div class="list" v-for="(item,index) in killInfo">
				<router-link :to="'/ZoneDetail/id/' + item.seckill_id">
					<div class="infoWrap">
						<div class="title-bar">
							<div class="timer">
								<count-down v-if="cache" :currentTime="cur_time" :startTime="item.seckill_starttime" :endTime="item.seckill_endtime" :tipText="'距开始:'" :tipTextEnd="'距结束:'" :endText="'已结束'" :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="'秒'"></count-down>
							</div>
							<div class="crazy">疯抢中，先下单先得</div>
						</div>
						<div class="item">
							<img alt="" class="img" :src="item.goods_thumb" />
							<div class="info">
								<p class="name">{{item.goods_name}}</p>
								<div class="other">
									<x-progress :percent="parseInt((item.seckill_vsales/item.seckill_num).toFixed(2)*100)" :show-cancel="false"></x-progress>
									<span class="ctxt">已抢{{item.seckill_vsales}}件</span>
									<span class="percent">{{parseInt((item.seckill_vsales/item.seckill_num).toFixed(2)*100) + '%'}}</span>
									<span class="price">￥{{item.seckill_price}}</span>
									<div class="offer right">
										<a href="#">立即抢购</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</router-link>
			</div>
		</div>
		<loading :show="show1" :text="text"></loading>
		<toast v-model="success" type="text" width='2.8rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import BScroll from 'better-scroll';
	import CountDown from 'vue2-countdown'
	import { XHeader, Grid, GridItem, XProgress, Box, Loading, Toast } from 'vux'
	export default {
		data() {
			return {
				killInfo: [],
				percent: '',
				cur_time: '',
				show1: false,
				text: '加载中',
				success: false,
				msg: '',
				flag: true,
				cache: true
			}
		},
		components: {
			XHeader,
			Grid,
			GridItem,
			XProgress,
			Box,
			CountDown,
			BScroll,
			Loading,
			Toast
		},
		created() {
			this.getSecKillInfo();
		},
		methods: {
			getSecKillInfo: function() {
				let more = true;
				let page = 1;
				let _this = this;
				this.$http({
					method: 'GET',
					url: '/los/api/seckill/goods_list.json',
					data: ''
				}).then((result) => {
					this.cache = false;
					this.killInfo = result.data.list.data.reverse();
					this.cur_time = result.data.cur_time;
					this.$nextTick(() => {
						this.cache = true;
					});
				}).catch((err) => {
					console.log(err);
				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/seckill/goods_list?page=' + page).then(function(result) {
								$.each(result.data.list.data, function(index, val) {
									_this.killInfo.push(val);
								});
								more = true;
								if(result.data.list.data == '') {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})
			},

			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped>
	.header {
		background-color: #fff !important;
	}
	
	.main {
		padding: 0.26666rem 0.16rem;
	}
	
	.no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto 0;
	}
	
	.no-data img {
		width: 100%;
	}
	
	.list .title-bar {
		width: 100%;
		height: 1.06rem;
		line-height: 1.06rem;
		background: #fff;
		padding: 0 0.26rem;
		overflow: hidden;
		border-top-left-radius: 0.13rem;
		border-top-right-radius: 0.13rem;
	}
	
	.list .title-bar .timer {
		float: left;
		font-size: 0.34rem;
		color: #333;
	}
	
	.list .title-bar .timer .count-down {
		font-size: 0.34rem;
	}
	
	.list .title-bar .crazy {
		float: right;
		font-size: 0.32rem;
		color: #777;
	}
	
	.list .item {
		margin-bottom: 0.26666rem;
		padding: 0.37333rem 0.26666rem;
		border-radius: 0.05333rem;
		background-color: #fff;
		overflow: hidden;
		position: relative;
		border-bottom-left-radius: 0.13rem;
		border-bottom-right-radius: 0.13rem;
	}
	
	.list .item:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		padding: 0 0.26rem;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.list .item .img {
		float: left;
		width: 2.69rem;
		height: 2.69rem;
		font-size: 0;
		border-radius: 0.05333rem;
	}
	
	.list .item .info {
		position: relative;
		height: 2.93333rem;
		padding-left: 2.90666rem;
	}
	
	.list .item .info .name {
		margin-bottom: 0.32rem;
		padding-top: 0.10666rem;
		font-size: 0.34rem;
		height: 1.06666rem;
		line-height: 0.50666rem;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden;
	}
	
	.list .item .info .other {
		overflow: hidden;
		position: relative;
	}
	
	.list .item .info .other .price {
		float: left;
		margin-top: 0.34rem;
		font-size: 0.45rem;
		color: #DA4240;
	}
	
	.list .item .info .offer {
		width: 2.08rem;
		margin-top: 0.26rem;
	}
	
	.list .item .info .offer a {
		margin-bottom: 0.18666rem;
		width: 100%;
		height: 0.74666rem;
		color: #fff;
		font-size: 0.37333rem;
		line-height: 0.74666rem;
		text-align: center;
		background-color: #A30000;
		border-radius: 0.05333rem;
		display: inline-block;
	}
	
	.weui-progress {
		width: 65%;
	}
	
	.list .item .info .ctxt {
		position: absolute;
		top: 0;
		width: 60%;
		border-radius: 0.16rem;
		text-align: left;
		padding-left: 0.26rem;
		color: #ff9492;
	}
	
	.list .item .info .percent {
		position: absolute;
		top: 0;
		width: 65%;
		padding-right: 0.26rem;
		border-radius: 0.16rem;
		text-align: right;
		padding-left: 0.26rem;
		color: #ff9492;
		margin-top: 0.05rem;
	}
</style>